<script setup>
// 引入响应式函数
import { nextTick, onMounted, ref, useTemplateRef } from 'vue'

//引入路由模块
import { useRouter, useRoute } from 'vue-router'
//构建路由方法对象
const router = useRouter()
// 构建路由参数对象
const route = useRoute()

// 引入封装的请求函数
import { getCinemaDetails, getCinemaFilm, getFootinfo } from '../../api/LXZindex'

// 引入pinia数据
import { storeToRefs } from 'pinia'
import { FilmDataObj } from '@/stores/LXZ.ts'
// 获取pinia实例内容
const FilmDataStore = FilmDataObj()

// 获取pinia数据使用这种方式
// const { FilmImg } = storeToRefs(FilmDataStore)
// console.log("ChooseYourSeat",FilmImg);

// 获取pinia内的方法使用这种方法
const { ChooseYourSeat } = FilmDataStore

// console.log('打印pinia', ChooseYourSeat)

// 获取影院详情数据
let DetailsData = ref(null)
getCinemaDetails(route.query.id).then((res) => {
  // 将获取的数据赋值给响应式变量DetailsData
  DetailsData.value = res.data.data
  // console.log(DetailsData.value)
})

// 影片详情下标
let FilmCodeindex = ref(0)
// 获取影片的详细信息
let FilmData = ref(null)
getCinemaFilm(route.query.id).then((res) => {
  // 将获取的数据赋值给响应式变量FilmData
  FilmData.value = res.data.data
  if (route.query.movieId) {
    FilmCodeindex.value = res.data.data.movies.findIndex((item) => {
      return item.id == route.query.movieId
    })
  }
  nextTick(() => {
    touchEndHandler()
  })
  // console.log('影片数据', FilmData.value, FilmCodeindex.value)
})

// 影片放映时间下标
let ShowTimeBarActiveIndex = ref(0)

// 获取影院超值套餐
let Footinfo = ref(null)
getFootinfo().then((res) => {
  Footinfo.value = res.data.data.dealList[0]
  // console.log('超值套餐', Footinfo.value)
})

// })

// 中间滑动区域
let scr = useTemplateRef('scrollbox')
function handleScroll() {
  nextTick(() => {
    // console.log(scr.value.scrollLeft)
    FilmCodeindex.value = Math.round(scr.value.scrollLeft / 85)
  })
}
function touchEndHandler($event) {
  // console.log($event)
  scr.value.scrollLeft = FilmCodeindex.value * 85
}

const token = localStorage.getItem('token')
const userToken = token ? JSON.parse(token) : ''
// 前往购票详情
function gotoBuyMovieTickets(infoObj) {
  // console.log(infoObj)

  if (userToken) {
    router.push({
      path: '/buyTicket',
    })

    ChooseYourSeat(FilmData?.value.movies[FilmCodeindex.value].img, {
      movid: route.query.id,
      CMname: infoObj.CMname,
      name: infoObj.name,
      lobbySeats: infoObj.lobbySeats,
      Language: infoObj.Language,
      ScreenLevel: infoObj.ScreenLevel,
      date: infoObj.date,
      id: FilmData?.value.movies[FilmCodeindex.value].id,
    })
  } else {
    router.push({
      path: '/login',
      query: {
        target: route.fullPath, // 当前页面的路径
      },
    })
  }
}

// onMounted(() => {
//   setTimeout(() => {
//     touchEndHandler()
//   }, 800)
// })
</script>


<template>
  <div v-if="DetailsData" class="Cinema-body">
    <!-- 顶部导航栏 -->
    <van-nav-bar :title="DetailsData.nm" @click-left="router.back()">
      <template #right>
        <van-icon name="wap-nav" size="28rem" color="#fff" />
      </template>
      <template #left>
        <van-icon name="arrow-left" size="28rem" color="#fff" />
      </template>
    </van-nav-bar>

    <!-- 店铺位置 -->
    <div class="map">
      <div class="map-left">
        <div class="map-name">{{ DetailsData.nm }}</div>
        <div class="map-loch">{{ DetailsData.addr }}</div>
      </div>

      <!-- 右侧图标 -->
      <div class="icon"><van-icon name="location-o" color="#a6d1ff" size="28rem" /></div>
    </div>

    <!-- 影片选择 -->
    <!-- 影片图片盒子 -->
    <div class="FilmImgBox" v-if="FilmData?.movies"
      :style="{ background: `url(${FilmData?.movies[FilmCodeindex].img})` }">
      <!-- 用于移动的盒子 -->

      <div class="imgbox" ref="scrollbox" @scroll="handleScroll" @touchend="touchEndHandler">
        <!-- 用于强调选中的盒子 -->
        <div class="img" v-for="(imgSrc, index) of FilmData?.movies" :key="imgSrc.id" @click="FilmCodeindex = index"
          :class="index === FilmCodeindex ? 'active' : ''">
          <!-- 封面图片 -->
          <van-image width="75rem" height="110rem" fit="cover" :src="imgSrc.img" />
        </div>
      </div>
    </div>

    <!-- 影片标题信息栏 -->
    <div class="Film-info" v-if="FilmData?.movies">
      <div class="title">
        {{ FilmData?.movies[FilmCodeindex].nm }}
        <span style="color: #ffb80d; margin-left: 5rem" v-if="FilmData?.movies[FilmCodeindex].sc=='0.0'">
         暂无评分
        </span>
        <span style="color: #ffb80d; margin-left: 5rem" v-else>
          {{ FilmData?.movies[FilmCodeindex].sc }}分
        </span>
        
      </div>
      <div class="desc">{{ FilmData?.movies[FilmCodeindex].desc }}</div>
    </div>
    <!-- 放映时间 -->
    <div class="show-time">
      <van-tabs v-model:active="ShowTimeBarActiveIndex">
        <!-- 广告 -->
        <div class="show-Ad">
          <div class="Ad-icon">折扣</div>
          <div class="Ad-text">现在开卡，首单2张票最高立减6元</div>
          <div class="Ad-btn">9.9元起开卡<van-icon name="arrow" color="#afafaf" /></div>
        </div>

        <van-tab v-for="(tieles, index) in FilmData?.movies[FilmCodeindex].shows" :key="index" :title="tieles.showDate">
          <!-- 切换的内容 -->
          <!-- 购票卡片 -->

          <div v-if="!FilmData?.movies[FilmCodeindex].shows[index].plist.length">
            <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
              description="本日暂无电影票出售！" />
          </div>

          <div class="BuyTickets-Card" v-for="(CardItem, idx) in FilmData?.movies[FilmCodeindex].shows[index].plist"
            :key="idx">
            <!-- 卡片循环盒子 -->
            <!-- <div class="BuyTickets-Card-Item" v-for="(CardItem, index2) in item" :key="index2"> -->

            <!-- 卡片盒子 -->
            <div class="Card">
              <!-- 左边部分 -->
              <div class="Card-left">
                <!-- 开始和结束时间 -->
                <div class="play-time">
                  <div class="start-Time">{{ CardItem.tm }}</div>
                  <div class="end-Time">{{ CardItem.tm }}散场</div>
                  <div class="tag" v-if="CardItem.preShowTag">点映</div>
                </div>
                <!-- 影片语言和厅位 -->
                <div class="Language">
                  <div class="lang">{{ CardItem.lang }} {{ CardItem.tp }}</div>
                  <div class="Quality">{{ CardItem.th }}</div>
                </div>
              </div>
              <!-- 右边部分 -->
              <div class="Card-right">
                <!-- 价格 -->
                <div class="Price-box">
                  <div class="Price">
                    <span style="font-size: 10rem; height: 16rem">￥</span>
                    {{ CardItem.discountSellPrice }}
                    <div class="VipPrice" v-if="CardItem.vipPrice">
                      <div class="vip">{{ CardItem.vipPriceName }}</div>
                      <div class="pricetext">￥{{ CardItem.vipPrice }}</div>
                    </div>
                  </div>
                  <!-- 正确写法 -->
                  <!-- <div class="Discount-text" v-if="CardItem.extraDesc">
                    {{ CardItem.extraDesc }}
                  </div> -->
                  <div class="Discount-text">折扣卡首单优惠</div>
                </div>

                <!-- 购票按钮 -->
                <div class="Language" @click="
                  gotoBuyMovieTickets({
                    // 影院名字
                    CMname: DetailsData.nm,
                    // 影片名字
                    name: FilmData?.movies[FilmCodeindex].nm,
                    // 厅位
                    lobbySeats: CardItem.th,
                    // 影片语言和
                    Language: CardItem.lang,
                    // 荧幕等级
                    ScreenLevel: CardItem.tp,
                    // 日期
                    date: tieles.showDate,
                  })
                  ">
                  购票
                </div>
                <!-- </div> -->
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab disabled v-if="FilmData?.movies[FilmCodeindex].shows.length > 2"></van-tab>
        <van-tab disabled v-if="FilmData?.movies[FilmCodeindex].shows.length > 2"></van-tab>
        <van-tab disabled v-if="FilmData?.movies[FilmCodeindex].shows.length > 2"></van-tab>
        <van-tab disabled v-if="FilmData?.movies[FilmCodeindex].shows.length > 2"></van-tab>
        <van-tab disabled v-if="FilmData?.movies[FilmCodeindex].shows.length > 2"></van-tab>
        <van-tab disabled v-if="FilmData?.movies[FilmCodeindex].shows.length > 2"></van-tab>
        <van-tab disabled v-if="FilmData?.movies[FilmCodeindex].shows.length > 2"></van-tab>
        <van-tab disabled v-if="FilmData?.movies[FilmCodeindex].shows.length > 2"></van-tab>
      </van-tabs>
    </div>

    <!-- 影院超值套餐 -->

    <div class="FoodPackages-box">
      <div class="title">影院超值套餐</div>

      <div class="FoodPack-Card">
        <van-image width="92rem" height="92rem" fit="contain" :src="Footinfo?.imageUrl" />

        <div class="Food-info-box">
          <div class="Foot-title">
            <div class="Food-Tag">{{ Footinfo?.titleTag }}</div>
            <div class="Food-name">{{ Footinfo?.firstTitle }}</div>
          </div>
          <div class="Foot-curnum">{{ Footinfo?.curNumberDesc }}</div>

          <div class="Foot-pay-box">
            <div class="Food-price">
              <span style="font-size: 12rem">￥</span>{{ Footinfo?.price }}
            </div>
            <div class="pay-btn">去购买</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
























<style lang="less" scoped>
// 页面样式
.Cinema-body {
  background-color: #f0f0f0;
}

//修改vant顶部栏样式
:deep(.van-nav-bar__content) {
  background-color: #e54848;
}

:deep(.van-nav-bar__title) {
  color: white;
}

// 地址区域样式
.map {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rem;
  box-sizing: border-box;
  background-color: white;

  .map-left {
    width: 260rem;
    flex-grow: 1;
    border-right: 1px solid rgba(210, 210, 210, 0.8);

    .map-name {
      font-size: 19rem;
      font-weight: 700;
      white-space: nowrap;
      /* 防止文本换行 */
      overflow: hidden;
      /* 隐藏溢出的文本 */
      text-overflow: ellipsis;
      /* 使用省略号表示溢出的文本 */
    }

    .map-loch {
      font-size: 12rem;
      color: #afafaf;
      white-space: nowrap;
      /* 防止文本换行 */
      overflow: hidden;
      /* 隐藏溢出的文本 */
      text-overflow: ellipsis;
      /* 使用省略号表示溢出的文本 */
    }
  }

  .icon {
    margin-left: 20rem;
  }
}

// 中间影片封面样式
.FilmImgBox {
  height: 135rem;
  display: flex;
  align-items: center;
  background-color: #afafaf;

  .imgbox {
    display: flex;
    align-items: center;
    overflow-x: scroll;
    padding: 10.5rem 40vw;
    -ms-overflow-style: none;
    /* IE 和 Edge */
    scrollbar-width: none;
    /* Firefox */

    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);

    // transform: translateX() calc(-50vw +(75rem * 0.5));
    .img {
      margin: 0 5rem;
      transform: scale(0.95);
    }
  }

  // 影片被选中样式
  .active {
    transform: scale(1.1) !important;
    // border: 4px solid #fff;
    // box-sizing: border-box;
  }
}

// 影片标题信息栏
.Film-info {
  padding: 20rem;
  box-sizing: border-box;
  border-bottom: 1px solid #e0e0e0;
  background-color: white;

  .title {
    width: 100%;
    font-weight: 700;
    font-size: 18rem;
    text-align: center;
  }

  .desc {
    width: 100%;
    font-size: 15rem;
    text-align: center;
    color: #afafaf;
  }
}

// 设置导航栏组件样式
// 选中下标线
:deep(.van-tabs__line) {
  width: 95rem;
  background-color: #e54848;
}

// 选项大小和文字颜色
:deep(.van-tab__text) {
  color: #717171;
  font-size: 16rem;
}

:deep(.van-tab--active) {
  span {
    color: #e54848;
  }
}

//广告样式
.show-Ad {
  width: 100vw;
  height: 42rem;

  padding: 0 20rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-size: 12rem;
  background-color: #fff5ea;

  .Ad-icon {
    font-size: 11rem;
    color: white;
    background-color: #ff941a;
    border-radius: 2rem;
    padding: 1rem 6rem;
    margin-right: 6rem;
  }

  .Ad-text {
    flex-grow: 1;
    color: #ff941a;
  }

  .Ad-btn {
    color: #a6a5a4;
  }
}

// 购票卡片样式

.Card {
  // background-color: #e54848;
  display: flex;
  align-items: center;
  height: 80rem;
  justify-content: space-between;

  padding: 10rem;
  box-sizing: border-box;
  border-bottom: 1px solid #e0e0e0;
  background-color: white;

  .Card-left {
    display: flex;

    .play-time {
      display: flex;
      align-items: center;
      flex-flow: column;
      position: relative;

      .tag {
        font-size: 9rem;
        color: white;
        background-color: #ff7979;
        padding: 0 3rem;
        position: absolute;
        bottom: -12rem;
        left: 0;
        border-radius: 2rem;
      }

      .start-Time {
        font-size: 18rem;
        height: 21rem;
      }

      .end-Time {
        font-size: 10rem;
        color: #afafaf;
      }

      margin-right: 20rem;
    }

    .Language {
      .lang {
        font-size: 15rem;
        height: 21rem;
      }

      .Quality {
        width: 100rem;
        font-size: 10rem;
        color: #afafaf;

        white-space: nowrap;
        /* 防止文本换行 */
        overflow: hidden;
        /* 隐藏溢出的文本 */
        text-overflow: ellipsis;
        /* 使用省略号表示溢出的文本 */
      }
    }
  }

  .Card-right {
    display: flex;
    align-items: center;

    .Price-box {
      display: flex;
      flex-flow: column;

      .Price {
        color: #fe596d;
        display: flex;
        align-items: end;

        .VipPrice {
          height: 12rem;
          line-height: 12rem;
          display: flex;
          align-content: center;

          font-size: 10rem;
          border: 1px solid #ff9902;
          border-radius: 3rem;
          margin-left: 4rem;

          .vip {
            color: white;
            background-color: #ff9902;
          }

          .pricetext {
            color: #ff9902;
          }
        }
      }

      .Discount-text {
        font-size: 12rem;
        color: #afafaf;
      }
    }

    .Language {
      height: 22rem;
      font-size: 12rem;
      line-height: 22rem;
      padding: 0 10rem;
      border-radius: 20rem;
      border: 1px solid #fc464d;
      display: flex;
      align-items: center;
      justify-items: center;
      color: #fc464d;
      margin-left: 10rem;
    }
  }
}

// 超值套餐商品卡片
.FoodPackages-box {
  margin-top: 20rem;
  background-color: white;
  padding: 10rem;

  .title {
    margin-bottom: 10rem;
  }

  .FoodPack-Card {
    font-size: 15rem;
    border-top: 1px solid #e0e0e0;
    padding: 10rem 0;
    display: flex;

    .Food-info-box {
      flex-grow: 1;
      display: flex;
      flex-flow: column;
      margin-left: 10rem;
      justify-content: space-between;

      .Foot-title {
        display: flex;
        align-items: center;

        .Food-Tag {
          font-size: 10rem;
          height: 12rem;
          line-height: 12rem;
          background-color: #ff9902;
          padding: 1rem 3rem;
          color: white;
          border-radius: 2rem;
          margin-right: 10rem;
        }
      }

      .Foot-pay-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .Food-price {
          color: #e54848;
          height: 13rem;
        }

        .pay-btn {
          padding: 8rem 10rem;
          font-size: 12rem;
          background-color: #f03d37;
          color: white;
          border-radius: 3rem;
        }
      }

      .Foot-curnum {
        text-align: end;
        font-size: 14rem;
        color: #afafaf;
      }
    }
  }
}
</style>